import React, { Component } from 'react'
import { connect } from 'react-redux';
import {personActions} from "../../redux/actions/person";
import {nanoid} from "nanoid"
class PersonUI extends Component {
  
  add = () => {
    const addname = this.inputName.value;
    const addage = this.inputAge.value;
    this.props.add({id: nanoid(),name: addname, age: addage});
    this.inputAge=""
    this.inputName = ""
  }

  render() {
    const {List} = this.props;
    return (
      <div>
        <h2>我是Person组件</h2>
        <input type="name" ref={(c) => this.inputName= c } placeholder="名字"/>&nbsp;&nbsp;&nbsp;
        <input type="number" ref={(c) => this.inputAge = c }placeholder="年纪" /> &nbsp;&nbsp;&nbsp;
        <button onClick={this.add}>新增一个人</button>
        {
          List.map(item => {
           return <div key={item.id}>{item.name}-{item.age}</div>
          })
        }
      </div>
    )
  }
}

export default connect(
  state => ({List: state.personReducer}),
  {
    add: personActions
  }
)(PersonUI)
